<template>
<h1>El-日期时间选择器组件</h1>
  <el-date-picker
    type="date"
    v-model="date"
    @change="console.log(date)"
    format="YYYY/MM/DD"
    value-format="YYYY/MM/DD"
    placeholder="请选择日期"
  ></el-date-picker>

  <el-date-picker
      type="datetime"
      v-model="time"
      @change="console.log(time)"
      format="YYYY/MM/DD HH:mm:ss"
      value-format="YYYY/MM/DD HH:mm:ss"
      placeholder="请选择日期时间"
  ></el-date-picker>
  <br>
  <el-date-picker
      type="datetimerange"
      v-model="times"
      @change="f"
      format="YYYY/MM/DD HH:mm:ss"
      value-format="YYYY/MM/DD HH:mm:ss"
      start-placeholder="请选择入住时间"
      end-placeholder="请选择退房时间"
      range-separator="到"
  ></el-date-picker>
</template>

<script setup>
import {ref} from "vue";

//定义变量用来保存用户选择的日期
const date=ref('');
const time=ref('');
//定义数组来保存用户选择的起止时间
const times=ref();
//定义输出起止时间的方法
const f=()=>{
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
</script>

<style scoped>

</style>